<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化-张向欢</title>
    <link rel="stylesheet" href="../static/css/index.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>疫情数据可视化</h1>
      <div class="show-time"></div>
      <script>
        var t = null;
        t = setTimeout(time, 1000); //开始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.querySelector(".show-time").innerHTML =
            "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "日-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      </script>
    </header>

    <!-- 页面主体 -->
    <section class="mainbox">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel a1">
          <h2>国内新冠疫情死亡率</h2>
          <!-- 图表放置盒子 -->
          <div class="chart"></div>
          <!-- 伪元素绘制盒子下边角 -->
          <div class="panel-footer"></div>
        </div>
        <div class="panel a2">
          <h2>全国每日新增的确诊人数（二月份）</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel a4">
          <h2>各省市从湖北迁入的人口比例与该省累计确诊人数的关系</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="column">
        <!-- 头部 no模块 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>1558934</li>
              <li>{{ zyu|safe }}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>确诊人数</li>
              <li>治愈数</li>
            </ul>
          </div>
        </div>
        <!-- map模块 -->
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart"></div>
          <div class="chart1"></div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="column">
        <div class="panel a3">
          <h2>各媒体发布的新闻占比情况</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel a5">
          <h2>各媒体每一天的新闻数量</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel a7">
          <h2>所有新闻的关键字</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>
    <script src="../static/js/flexible.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/jquery.js"></script>
    <!-- 引入china.js 完成地图模块 -->
    <script src="../static/js/china.js"></script>
    <script src="../static/js/echarts-wordcloud.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
// 左上仪表盘a1
(function () {
  // 1.实例化对象
  var myChart = echarts.init(document.querySelector(".a1 .chart"));
  // 2.指定配置项和数据
  option = {
      tooltip:{
          trigger:'item'

      },
    series: [{
        min:0,
        max:10,
        radius:'100%' ,
        type: 'gauge',
        axisLine: {
            lineStyle: {
                width: 20,
                color: [
                    [0.3, '#67e0e3'],
                    [0.7, '#37a2da'],
                    [1, '#fd666d']
                ]
            }
        },
        pointer: {
            itemStyle: {
                color: 'auto'
            }
        },
        axisTick: {
            distance: -30,
            length: 6,
            lineStyle: {
                color: '#fff',
                width: 2
            }
        },
        splitLine: {
            distance: -30,
            length: 25,
            lineStyle: {
                color: '#fff',
                width: 3
            }
        },
        axisLabel: {
            color: 'auto',
            distance: 5,
            fontSize: 10
        },
        detail: {
            valueAnimation: true,
            formatter: '{value} %',
            color: 'auto',
            fontSize:23
        },
        data: [{
            'name':'死亡率',
            'value': {{rate|safe}}
        }]

    }]
};
option && myChart.setOption(option);
})();
// 左中折线图a2
(function () {
  var myChart = echarts.init(document.querySelector(".a2 .chart"));
  var option = {
        title: {
            text: "",
            left: "center",
        },
        tooltip: {
            trigger: 'item',
            formatter: '2月{b}日:{c}人'
        },
        yAxis: {
            show: true,
        },
        xAxis: {
            data: {{ time|safe }}
        },
        series: [
            {
                type: "line",
                name: "新增确诊",
                data: {{ date }}
            },
        ]
    };
  myChart.setOption(option);
  // 4.让图表随屏幕自适应
  window.addEventListener('resize', function () {
    myChart.resize();
  })

})();
// 右上饼形图a3
(function () {
  var myChart = echarts.init(document.querySelector(".a3 .chart"));
  var option = {
    color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      // 垂直居中,默认水平居中
      orient: 'leftarrow',

      bottom: 0,
      left: 10,
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      // 修改图例组件的文字为 12px
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "10"
      }
    },
    series: [{
      radius:'200%' ,
      name: '年龄分布',
      type: 'pie',
      // 设置饼形图在容器中的位置
      center: ["50%", "42%"],
      // 修改饼形图大小，第一个为内圆半径，第二个为外圆半径
      radius: ['40%', '85%'],
      avoidLabelOverlap: false,
      // 图形上的文字
      label: {
        show: true,
        position: 'inner',
         formatter: '{d}%'
      },
      // 链接文字和图形的线
      labelLine: {
        show: false
      },
      data: {{ bin|safe }}
    }]
  };

  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})();
// 左下散点图a4
(function () {
  // 1.实例化对象
  var myChart = echarts.init(document.querySelector(".a4 .chart"));
  // 声明颜色数组
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 2.指定配置项和数据
  var option = {
    // 修改两条线的颜色
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis',
        formatter:'{a0}{c0}人'
    },
    // 图例组件
    legend: {
      // 当serise 有name值时， legend 不需要写data
      // 修改图例组件文字颜色
      textStyle: {
        color: '#4c9bfd'
      },
      right: '10%',
    },
    grid: {
      top: "20%",
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      show: true, // 显示边框
      borderColor: "#4c9bfb" // 边框颜色
    },
    xAxis: {
      type: 'value',
      boundaryGap: false, // 去除轴间距
      data:[],

      // 去除刻度线
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#4c9bfb" // x轴文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      // 去除刻度线
      axisTick: {
        show: true
      },
      axisLabel: {
        color: "#4c9bfb" // x轴文本颜色
      },
      axisLine: {
        show: true // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#4c9bfb"
        }
      }
    },
    series: [{
        type: 'scatter',
        smooth: true, // 圆滑的线
        name: '关系图',
        data:{{ shandian|safe }}
        ,}]
  };
  // 3.把配置项给实例对象
  myChart.setOption(option);
  // 4.让图表随屏幕自适应
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})();
// 右中主题图a5
(function () {
  var myChart = echarts.init(document.querySelector('.a5 .chart'));
  var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#4c9bfd',
                width: 1,
                type: 'solid'
            }
        }
    },
    legend: {
        data: ['央视网', '新华社', '国家卫健委', '人民日报']
    },
    singleAxis: {
        top: 50,
        bottom: 50,
        axisTick: {},
        axisLabel: {},
        type: 'time',
        axisPointer: {
            animation: true,
            label: {
                show: true
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                opacity: 0.2
            }
        }
    },
    // 图例组件
    legend: {
      // 当serise 有name值时， legend 不需要写data
      // 修改图例组件文字颜色
      textStyle: {
        color: '#4c9bfd'
      },
      right: '10%',
    },
    grid: {
      top: "20%",
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      show: true, // 显示边框
      borderColor: '#4c9bfd' // 边框颜色
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // 去除轴间距
      data:['2020-02-02','2020-02-08','2020-02-14','2020-02-20','2020-02-26','2020-02-29'],

      // 去除刻度线
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#4c9bfb" // x轴文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: 'value',
      // 去除刻度线
      axisTick: {
        show: true
      },
      axisLabel: {
        color: "#4c9bfb" // x轴文本颜色
      },
      axisLine: {
        show: true // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: '#4c9bfd'
        }
      }
    },
    series: [
        {
          radius:'100%' ,
           width: '150%',
           height: '150%',
           drawOutOfBound:false,
            type: 'themeRiver',
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 999, 8888, 0.8)'
                }
            },
           data:{{ he|safe }}
        }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  })
})();
// 中上map迁移地图
(function () {
    var chart_b1 = echarts.init(document.querySelector(".map .chart"));
    var option_b1 = {
        title: {
            text: "人口迁徙图",
            left: "center",
        },
        tooltip: {
            trigger: 'item'
        },
        geo: {
            map: "china",
            itemStyle: {
                areaColor: "#c1f5ff",
            },
        },
         // backgroundColor:"#141845",
        visualMap: { //图例值控制
            min: 0,
            max: 70,
            calculable: true,
            show: true,
            color: ['#FFC125', '#EEB442', '#CD9B1D', '#8B6914', ],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            zoom: 1.5,
            label: {
                emphasis: {
                    show: true
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    color: '#87CEEB ', //地图背景色
                    borderColor: '#FF4040', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37,43,61,0.5)' //悬浮背景
                }
            }
        },
        series: [
            {   label:true,
                type: "lines",
                name: "航线",
                coordinateSystem: "geo",
                data:{{ map1|safe }},
                zlevel: 1,
                effect: {                //  尾迹特效 需要单独 放在一个层
                    show: true,
                    period: 4,           // 动画时间
                    trailLength: 0.6,    // 特效尾迹的长度
                    color: '#fff',
                    symbolSize: 6,
                    symbol: "arrow"
                },
                lineStyle: {

                    normal: {
                        color: '#3f73a8',
                        width: 2,
                        opacity: 0.05,
                        curveness: 0.2      // 边的曲度
                    }
                },
            },
            {
                type: "scatter",
                name: "散点",
                coordinateSystem: "geo",
                data:{{ map2|safe }}            }
        ]
    };
    chart_b1.setOption(option_b1);

})();
// 右下词云图a7
(function () {
    var myChart = echarts.init(document.querySelector('.a7 .chart'));

        var optionFour = {
            tooltip: {
                show: true
            },
            series: [{
                name: '项目分析',
                type: 'wordCloud',
                sizeRange: [10, 40],//文字范围
                //文本旋转范围，文本将通过rotationStep45在[-90,90]范围内随机旋转
                rotationRange: [-45, 90],
                rotationStep: 45,
                textRotation: [0, 45, 90, -45],
                //形状
                // shape: 'square',
                textStyle: {
                    normal: {
                        color: function() {//文字颜色的随机色
                            return 'rgb(' + [
                                Math.round(Math.random() * 250),
                                Math.round(Math.random() * 250),
                                Math.round(Math.random() * 250)
                            ].join(',') + ')';
                        }
                    },
                    //悬停上去的字体的阴影设置
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#1ce7ee'
                    }
                },
                data: {{cy|safe }}
            }]
        };
         var myChart = echarts.init(document.querySelector('.a7 .chart'));
        // var myChartFour = echarts.init(document.getElementById('cyt'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(optionFour);})();
// 中下疫情映射图
(function () {//初始化echarts实例
    var myChart = echarts.init(document.querySelector(".map .chart1"));
    // 指定图表的配置项和数据
    option = {
      title: {
        text: '中国疫情图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
          formatter:'{b}:{c}人'
      },
      legend: {
        orient: 'vertical',
        left: 'b',
        data: ['中国疫情图']
      },
      visualMap: {
        type: 'piecewise',
        pieces: [
          { min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28' },
          { min: 800, max: 1000, label: '确诊500-999人', color: '#4e160f' },
          { min: 500, max: 800, label: '确诊500-800人', color: '#974236' },
          { min: 100, max: 500, label: '确诊100-500人', color: '#ee7263' },
          { min: 1, max: 100, label: '确诊1-100人', color: '#f5bba7' },
        ],
        color: ['#E0022B', '#E09107', '#A3E00B']
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      roamController: {
        show: true,
        left: 'right',
        mapTypeControl: {
          'china': true
        }
      },
        roam: true,
      series: [
        { //是否允许缩放
          name: '确诊数',
          type: 'map',
          mapType: 'china',
          roam: false,
          label: {
            show: true,
            color: 'rgb(249, 249, 249)'
          },
          data: {{map|safe}}}]
    };
    //使用指定的配置项和数据显示图表
    myChart.setOption(option);})();
</script>
  </body>
</html>
